<extend name="./Application/Admin/View/common/base.html" />
<block name="crumb">
    <span class="c-gray en">&gt;</span> 默认配置
    <span class="c-gray en">&gt;</span> 站点设置
</block>
<block name="content">
    <div class="tabBar cl m-b-10">
        <span><a href="{:U('Report/order')}">订单概况</a></span>
        <span class="current"><a href="{:U('Report/week_order')}">一周走势</a></span>
    </div>

    <div id="report_order_num" class="col-xs-6" style="height:300px;"></div>
    <div id="report_order_amt" class="col-xs-6" style="height:300px;"></div>
</block>
<block name="js">
    <script type="text/javascript" src="__PUBLIC__/Admin/echarts.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var myChartNum = echarts.init(document.getElementById('report_order_num'));
            // 指定图表的配置项和数据
            var optionNum = {
                title: { text: '订单量统计' },
                tooltip: { trigger: 'axis' },
                legend: { data:['已完成','已确认','待确认','已取消']},
                grid: {
                    left: '5%', right: '5%', bottom: '5%', containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [
                        '{:date("m/d" ,strtotime("-7 day"))}',
                        '{:date("m/d" ,strtotime("-6 day"))}',
                        '{:date("m/d" ,strtotime("-5 day"))}',
                        '{:date("m/d" ,strtotime("-4 day"))}',
                        '{:date("m/d" ,strtotime("-3 day"))}',
                        '{:date("m/d" ,strtotime("-2 day"))}',
                        '{:date("m/d" ,strtotime("-1 day"))}',
                    ]
                },
                yAxis: {
                    type: 'value',
                },
                series: [{
                    name:'已完成',
                    type:'line',
                    stack:'a',
                    data:[140, 132, 101, 134, 90, 230, 210]
                },{
                    name:'已确认',
                    type:'line',
                    stack:'b',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },{
                    name:'待确认',
                    type:'line',
                    stack:'c',
                    data:[130, 132, 101, 134, 90, 230, 210]
                },{
                    name:'已取消',
                    type:'line',
                    stack:'d',
                    data:[110, 132, 101, 134, 90, 230, 210]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChartNum.setOption(optionNum);

            var myChartAmt = echarts.init(document.getElementById('report_order_amt'));
            // 指定图表的配置项和数据
            var optionAmt = {
                title: { text: '订单金额统计' },
                tooltip: { trigger: 'axis'},
                legend: { data:['订单金额']},
                grid: {
                    left: '5%', right: '5%', bottom: '5%', containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value',
                },
                series: [{
                    name:'订单金额',
                    type:'line',
                    stack:'金额',
                    data:[220, 182, 91, 234, 290, 330, 910]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChartAmt.setOption(optionAmt);
        });
    </script>
</block>